<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内容发布</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
 		<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  		<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  		<style>
  			.layui-form-label{width: 90px;}
  			.layui-input-block{margin-left: 125px;}
  			.layui-upload-img{width: 92px;height: 92px;margin: 0 10px 10px 0;}
  		</style>
	</head>
	<body>
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header">内容发布</div>
				<div class="layui-card-body" style="padding: 15px;">
					<form class="layui-form" action="" lay-filter="component-form-group">
						<div class="layui-form-item">
							<div  class="layui-inline">
					       		<label class="layui-form-label">所属门户网站</label>
								<div class="layui-input-block">
								    <select name="city" lay-verify="required">
								        <option value=""></option>
								        <option value="0">监督指挥公众服务门户网站</option>
								        <option value="1">社会治安综合治理公众服务门户网站</option>
								    </select>
								</div>
							</div>
							<div  class="layui-inline">
								<label class="layui-form-label">所属栏目</label>
							    <div class="layui-input-block">
							      <select name="classify" lay-filter="classify">
							        <option value=""></option>
							        <option value="0" title="2">新闻动态</option>
							        <option value="1" title="1">政务公开</option>
							        <option value="2" title="3">案件公示</option>
							        <option value="3" title="1">督查督办</option>
							        <option value="4" title="4">友情链接</option>
							        <option value="5" title="5">联系方式</option>
							      </select>
							    </div>
							</div>
				       </div>
				       <div class="layui-form-item" name="title">
				       		<label class="layui-form-label">文章标题</label>
					        <div class="layui-input-block">
					            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
					        </div>
				       </div>
				       <div class="layui-form-item layui-hide" name="contact">
				       		<div  class="layui-inline">
								<label class="layui-form-label">电话</label>
					            <div class="layui-input-block">
					              <input type="text" name="phone" lay-verify="phone" autocomplete="off" placeholder="请输入电话" class="layui-input">
					            </div>
							</div>
							<div  class="layui-inline">
								<label class="layui-form-label">邮箱</label>
					            <div class="layui-input-block">
					              <input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
					            </div>
							</div>
				       </div>
				       <div class="layui-form-item layui-hide" name="contact">
				       		<label class="layui-form-label">地址</label>
					        <div class="layui-input-block">
					            <input type="text" name="address" lay-verify="address" autocomplete="off" placeholder="请输入地址" class="layui-input">
					        </div>
				       </div>
						<div class="layui-form-item"  name="editor">
							<div  class="layui-inline">
								<label class="layui-form-label">作者</label>
					            <div class="layui-input-block">
					              <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入作者" class="layui-input">
					            </div>
							</div>
							<div  class="layui-inline"  name="date">
								<label class="layui-form-label">日期</label>
					            <div class="layui-input-block">
					              <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
					            </div>
							</div>
				      </div>
						<div class="layui-form-item"  name="imgUpload">
							<label class="layui-form-label">上传图片</label>
							<div class="layui-input-block">
								<div class="layui-upload">
									<button type="button" class="layui-btn" id="upload">上传图片</button>
									<div class="layui-upload-list">
										<img class="layui-upload-img" id="demo1">
										<p id="demoText"></p>
									</div>
								</div>
							</div>
						</div>
						<div class="layui-form-item layui-hide"  name="imgHref">
							<label class="layui-form-label">图片链接</label>
							<div class="layui-input-block">
					            <input type="text" autocomplete="off" placeholder="请输入图片链接" class="layui-input">
					        </div>
						</div>
				       <div class="layui-form-item"  name="content">
				       		<label class="layui-form-label">内容</label>
							<div class="layui-input-block">
							    <textarea id="demo" style="display: none;"></textarea>
							</div>
				       </div>
				       <div class="layui-form-item">
							<div class="layui-input-block">
							    <button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
							    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script src="../../layuiadmin/layui/layui.js"></script>  
		<script>
			layui.use(['form','layedit','laydate','upload'], function(){
			  var form = layui.form
			  ,layer = layui.layer;
			  var layedit = layui.layedit;
			   var laydate = layui.laydate;
			   var $ = layui.jquery
 			 ,upload = layui.upload;
 			 
 			 //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#upload'
			    ,url: '/upload/'
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#demo1').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#demoText');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
 			 
			  layedit.build('demo');
			  
			  laydate.render({
			    elem: '#test1'
			  });
			  
			  form.on('select(classify)', function(data){
			  	console.log(data.elem[data.elem.selectedIndex].title);
			  	var mode=data.elem[data.elem.selectedIndex].title
			  	if(mode=='1'){
			  		$('[name="title"]').removeClass('layui-hide');
			  		$('[name="date"]').removeClass('layui-hide');
			  		$('[name="imgUpload"]').addClass('layui-hide');
			  		$('[name="imgHref"]').addClass('layui-hide');
			  		$('[name="content"]').removeClass('layui-hide');
			  		$('[name="editor"]').removeClass('layui-hide');
			  	}else if(mode=='2'){
			  		$('[name="title"]').removeClass('layui-hide');
			  		$('[name="date"]').removeClass('layui-hide');
			  		$('[name="imgUpload"]').removeClass('layui-hide');
			  		$('[name="imgHref"]').addClass('layui-hide');
			  		$('[name="content"]').removeClass('layui-hide');
			  		$('[name="editor"]').removeClass('layui-hide');
			  	}else if(mode=='3'){
			  		$('[name="title"]').removeClass('layui-hide');
			  		$('[name="date"]').removeClass('layui-hide');
			  		$('[name="imgUpload"]').removeClass('layui-hide');
			  		$('[name="imgHref"]').addClass('layui-hide');
			  		$('[name="content"]').removeClass('layui-hide');
			  		$('[name="editor"]').removeClass('layui-hide');
			  	}else if(mode=='4'){
			  		$('[name="title"]').addClass('layui-hide');
			  		$('[name="date"]').addClass('layui-hide');
			  		$('[name="imgUpload"]').removeClass('layui-hide');
			  		$('[name="imgHref"]').removeClass('layui-hide');
			  		$('[name="content"]').addClass('layui-hide');
			  		$('[name="editor"]').addClass('layui-hide');
			  	}else if(mode=='5'){
			  		$('[name="contact"]').removeClass('layui-hide');
			  		$('[name="title"]').addClass('layui-hide');
			  		$('[name="date"]').addClass('layui-hide');
			  		$('[name="imgUpload"]').addClass('layui-hide');
			  		$('[name="imgHref"]').addClass('layui-hide');
			  		$('[name="content"]').removeClass('layui-hide');
			  		$('[name="editor"]').addClass('layui-hide');
			  	}
			  });
			});
		</script>
	</body>
</html>
